<template>
  <div>
    <van-nav-bar
      title="饮食宜忌"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
    />

    <div class="grid">
      <van-grid :border="false" :column-num="8">
        <van-grid-item @click="Staple">
          <img src="../../assets/img/美食.png" alt="">
          <div>主食</div>
        </van-grid-item>
        <van-grid-item @click="Process">
          <img src="../../assets/img/美食2.png" alt="">
          <div>加工食品</div>
        </van-grid-item>
        <van-grid-item @click="Fungi">
          <img src="../../assets/img/美食3.png" alt="">
          <div>蔬菜菌类</div>
        </van-grid-item>
        <van-grid-item @click="Eggs">
          <img src="../../assets/img/美食4.png" alt="">
          <div>肉/蛋类</div>
        </van-grid-item>
        <van-grid-item @click="Fruit">
          <img src="../../assets/img/美食5.png" alt="">
          <div>水果</div>
        </van-grid-item>
        <van-grid-item @click="Grass">
          <img src="../../assets/img/美食6.png" alt="">
          <div>补品草药</div>
        </van-grid-item>
        <van-grid-item @click="Aquatic">
          <img src="../../assets/img/美食7.png" alt="">
          <div>水产品</div>
        </van-grid-item>
        <van-grid-item @click="Seasoning">
          <img src="../../assets/img/美食8.png" alt="">
          <div>调味品</div>
        </van-grid-item>
        <van-grid-item @click="Drink">
          <img src="../../assets/img/美食9.png" alt="">
          <div>饮品</div>
        </van-grid-item>
        <van-grid-item @click="Snack">
          <img src="../../assets/img/美食10.png" alt="">
          <div>零食小吃</div>
        </van-grid-item>
        <van-grid-item @click="Dairy">
          <img src="../../assets/img/美食11.png" alt="">
          <div>豆/奶制品</div>
        </van-grid-item>
        <van-grid-item @click="Nut">
          <img src="../../assets/img/美食112.png" alt="">
          <div>坚果类</div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup lang="ts">
    const onClickLeft = ()=>history.back()

    import { useRouter } from 'vue-router';

    const router = useRouter()

    const Staple = ()=>{
        router.push('/Staple')
    }

    const Process=()=>{
        router.push('/Process')
    }
    
    const Fungi=()=>{
        router.push('/Fungi')
    }

    const Eggs = ()=>{
      router.push('/Eggs')
    }

    const Fruit = ()=>{
      router.push('/Fruit')
    }
    const Grass = ()=>{
      router.push('/Grass')
    }

    const Aquatic = ()=>{
      router.push('/Aquatic')
    }

    const Seasoning=()=>{
      router.push('/Seasoning')
    }

    const Drink = ()=>{
      router.push('/Drink')
    }

    const Snack = ()=>{
      router.push('/Snack')
    }
</script>

<style lang='scss' scoped> 

.grid{
  height: 100%;
  width: 100%;
  background-color: #fff;
  margin-top: 30px;
  color: #999;
  img{
    height: 70px;
    width: 71px;
    margin: 10px 3px;
  }
}

</style>